<template>
  <el-menu
    class="sidebar-menu"
    :default-active="activeIndex"
    :collapse="false"
    @select="handleSelect"
  >
    <el-menu-item v-for="item in items" :key="item.index" :index="item.index">
      <!-- 支持自定义图标 div 或 element-plus 图标 -->
      <template v-if="item.customIcon">
        <div
          class="icon-wrapper"
          :class="[
            item.iconClass,
            { [item.activeIconClass]: activeIndex === item.index },
          ]"
        ></div>
      </template>
      <template v-else>
        <el-icon><component :is="item.icon" /></el-icon>
      </template>
      <span>{{ item.title }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const emit = defineEmits(["select"]);

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  activeIndex: {
    type: String,
    required: true,
  },
});

const handleSelect = (index) => {
  emit("select", index);
};
</script>

<style scoped>
.sidebar-menu {
  width: 150px;
  position: sticky;
  top: 0;
  left: 0;
}

.icon-wrapper {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
</style>
